<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <title>FTNK</title>
    <style>
            td {
            text-align: center; /* 让单元格内容居中对齐 */
        }
        .online {
            color: green;
        }
        .offline {
            color: red;
        }
        .normal {
            color: green;
        }
        .abnormal {
            color: red;
        }
        .auto {
            color: green;
        }
        .manual {
            color: orange;
        }
                /* 将数据图表放置在页面右侧 */
        #myChartContainer {
            float: right;
            width: 50%;
        }
body {
    background: linear-gradient(to bottom, #e0c3ff, #a8a2ff, #6b71ff); /* 设置垂直渐变背景色，从 #e0c3ff 到 #a8a2ff 到 #6b71ff */
}



}


    </style>
    <meta http-equiv="refresh" content="5">
</head>
<body>
<div class="container mt-5">
        <div id="myChartContainer">
            <!-- 数据图表 -->
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>
        <div style="width: 50%;">
            <h1 class="text-center mb-4">FTNK - 生产状态</h1>
            <!-- 数据表格 -->
            <table class="table table-bordered">
                <thead class="thead-light">
    <table>
        <tr>
            <th>生产线</th>
            <th>设备状态</th>
            <th>模式</th>
            <th>QC停止</th>
            <th>停止原因</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        {% for row in data %}
        <tr>
            <td>{{ row[2] }}</td>
            <td class="{% if row[6] == 'Online' %}online{% else %}offline{% endif %}">
                {% if row[6] == 'Online' %}
                    <span style="font-weight: bold; color: green;">在线</span>
                {% else %}
                    <span style="font-weight: bold; color: red;">离线</span>
                {% endif %}
            </td>
            <td class="{% if row[9] == 'Auto' %}auto{% else %}manual{% endif %}">
                {% if row[9] == 'Auto' %}
                    自动
                {% else %}
                    手动
                {% endif %}
            </td>
            <td class="{% if row[8] | lower == 'none' %}normal{% else %}abnormal{% endif %}">
                {% if row[8] | lower == 'none' %}
                    <span style="font-weight: bold; color: green;">正常</span>
                {% else %}
                    <span style="font-weight: bold; color: red;">停线</span>
                {% endif %}
            </td>
            <td>
                {% if row[8] | lower == "none" %}
                    <span style="color: green;">无</span>
                {% elif row[8] == "Continue5" %}
                    <span style="color: red;font-weight: bold;">连续5次不良</span>
                {% elif row[8] == "FTT+Continue5" %}
                    <span style="color: red;font-weight: bold;">FTT连续5次不良</span>
                {% else %}
                    <span style="color: red;font-weight: bold;">{{ row[8] }}</span>
                {% endif %}
            </td>
            <td>{{ row[10].strftime("%H:%M:%S") }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
        </div>
    </div>
 <!-- 数据图表 -->
        <canvas id="myChart" width="400" height="200"></canvas>
    </div>

    <!-- 引入Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  <script>
    // 使用Python统计后的数据
    const status_data_json = {{ status_data | safe | tojson }};
    const status_data = JSON.parse(status_data_json);
    // 模拟数据
    const data = {
        labels: ['在线', '离线', '自动', '手动'],
        datasets: [{
            label: '设备状态和模式统计',
            data:status_data,
            backgroundColor: [
                'rgba(75, 192, 192, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            borderColor: [
                'rgba(75, 192, 192, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    };

    // 创建图表
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 15 // 设置y轴最大值为15
                }
            }
        }
    });
</script>


</body>
</html>













